<template>
  <div
    class="user-medal__default flex flex-center px-16rpx py-2rpx bg-primary text-white rounded-full"
    :class="[
      size === 'sm' ? 'text-22rpx' : '',
      size === 'default' ? 'text-24rpx' : '',
      size === 'lg' ? 'text-26rpx' : ''
    ]"
    :style="customStyleObject">
    <span>
      {{ content }}
    </span>
  </div>
</template>

<script setup lang="ts">
  interface UserMedalProps {
    content: string //内容文字
    size?: 'sm' | 'default' | 'lg' //字体大小
    customStyle?: string //自定义样式
  }

  const props = withDefaults(defineProps<UserMedalProps>(), {
    customStyle: '',
    size: 'default'
  })

  // 自定义样式
  const customStyleObject = computed((): any => {
    if (!!props.customStyle) {
      try {
        return JSON.parse(props.customStyle)
      } catch (e) {
        console.error(props.customStyle, e)
        return {}
      }
    } else {
      return {}
    }
  })
</script>

<style scoped lang="scss">

</style>